<style lang="scss">

$menu-list--bg: #23262E;
$menu-list--bg-sub: #23262E;
$menu-list--bg-hover: rgba(65, 65, 65, 0.4);
$menu-list--color:#fff;
$menu-list--color-hover: #ff6565;
$menu-list--bar-color: #c53535;
$menu-list-transition-duration: 300ms;
$menu-list-transition-timing-function: linear;
.menu-list.ask {
    position: relative;
    height: 100%;
    background: $menu-list--bg url("~@/assets/aside-bg.png") no-repeat bottom;
    @include flexLayout(flex,normal,normal);
    flex-flow: column;
    overflow: hidden;
    padding: 0;
    font-family: "PingFang SC Light";
    box-shadow: 0 2px 4px 1px rgba(40, 120, 255, 0.08), 0 0 6px 1px rgba(0, 0, 0, 0.08);
    .menu-list-header{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        font-size: .2rem;
        color: $primary--color-0;
        background: $primary--color;
        font-weight: bold;
        height: .5rem;
        cursor: pointer;
        @include flexLayout(flex,center,center);
    }
    .menu-list-wrapper{
        flex: 1;
        height: calc(100% - .36rem);
        width: 100%;
        overflow-y: scroll;
        &::-webkit-scrollbar{
            width: 20px;
        }
    }
    .menu-list__bar{
        width: 100%;
        height: .36rem;
        .el-button{
            width: 100%;
            border-radius: 0;
            background: transparent;
            border-color: transparent;
            color: $menu-list--color;
            &:hover{
                background: $menu-list--bg-hover;
                border-color: $menu-list--bg-hover;
                color: $menu-list--color-hover;
            }
            .el-icon-d-caret{
                transform: rotate(90deg);
            }
        }
    }
    .ask-scrollbar-wrapper {
        flex: 1;
        height: 100%;
    }
    .el-scrollbar__wrap{
        overflow-x: hidden;
    }
    .base-layout-main.has-aside.in-collapse & .el-submenu__icon-arrow{
        opacity: 0;
    }
}

.custom-el-menu.el-menu{
    background: transparent;
    border-right: none;
}
.menu-barline{
    background: $menu-list--bar-color;
    width: .08rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    opacity: 0;
    transform: translateX(-.1rem);
    transition-property: opacity,transform;
    transition-duration: $menu-list-transition-duration;
    transition-timing-function: $menu-list-transition-timing-function;
}
.side-bar__popper .el-menu {
    background: $menu-list--bg-sub;
}
.custom-el-menu.el-menu .el-menu{
    background: transparent;
}

.side-bar__popper .el-menu-item,
.side-bar__popper .el-submenu>.el-submenu__title,
.custom-el-menu.el-menu .el-menu-item,
.custom-el-menu.el-menu .el-submenu>.el-submenu__title{
    color: $menu-list--color;
}
.side-bar__popper .el-menu-item:focus,
.side-bar__popper .el-menu-item:hover,
.side-bar__popper .el-submenu>.el-submenu__title:focus,
.side-bar__popper .el-submenu>.el-submenu__title:hover,
.custom-el-menu.el-menu .el-menu-item:focus,
.custom-el-menu.el-menu .el-menu-item:hover,
.custom-el-menu.el-menu .el-submenu>.el-submenu__title:focus,
.custom-el-menu.el-menu .el-submenu>.el-submenu__title:hover{
    color: $menu-list--color-hover;
    background-color: $menu-list--bg-hover;
}
.side-bar__popper .el-menu-item:focus .menu-barline,
.side-bar__popper .el-menu-item:hover .menu-barline,
.side-bar__popper .el-submenu>.el-submenu__title:focus .menu-barline,
.side-bar__popper .el-submenu>.el-submenu__title:hover .menu-barline,
.custom-el-menu.el-menu .el-menu-item:focus .menu-barline,
.custom-el-menu.el-menu .el-menu-item:hover .menu-barline,
.custom-el-menu.el-menu .el-submenu>.el-submenu__title:focus .menu-barline,
.custom-el-menu.el-menu .el-submenu>.el-submenu__title:hover .menu-barline{
    opacity: 1;
    transform: translateX(0);
}

.side-bar__popper .el-submenu.is-active .el-submenu__title .menu-barline,
.side-bar__popper .el-menu-item.is-active .menu-barline,menu-barline
.side-bar__popper .el-submenu>.el-submenu__title.is-active .menu-barline,
.custom-el-menu.el-menu .el-submenu.is-active .el-submenu__title .menu-barline,
.custom-el-menu.el-menu .el-menu-item.is-active .menu-barline,
.custom-el-menu.el-menu .el-submenu>.el-submenu__title.is-active .menu-barline{
    opacity: 1;
    transform: translateX(0);
}

.side-bar__popper .el-menu-item.is-active,
.side-bar__popper .el-submenu.is-active>.el-submenu__title,
.custom-el-menu.el-menu .el-menu-item.is-active {
    color: $menu-list--color-hover;
    background-color: $menu-list--bg-hover;
}
.side-bar-box{
    overflow: hidden;
}
.side-bar-box .custom-title{
    @include flexLayout(flex,normal,center);
    padding-left: .22rem;
    transition-property: padding;
    transition-duration: $menu-list-transition-duration;
    transition-timing-function: $menu-list-transition-timing-function;
    .base-layout-main.has-aside.in-collapse &{
        padding-left: 0;
    }
    .ct-icon-box{
        flex: 0 0 .17rem;
        min-width: 17px;
        text-align: center;
        line-height: normal;
        margin-right: .14rem;
        .icon-svg{
            font-size: .14rem;
            vertical-align: 0;
        }
        .ct-icon-box__img{
            width: 100%;
            img{
                width: 100%;
                height: auto;
            }
        }
    }
    .ct-label{
        flex: 1;
        width: 100%;
        font-size: .14rem;
        @include textEllipsis()
    }
}

// 解决子菜单缩进，覆盖行内样式
.el-submenu .el-menu .el-menu-item {
    padding-left: 20px!important;
    line-height: 50px;
    height: 50px;
}

.el-submenu .el-submenu__title {
    line-height: 50px;
    height: 50px;
}

.side-bar-box .el-menu-item {
    line-height: 50px;
    height: 50px;
}

</style>
<template>
    <div class="menu-list ask">
        <!-- <header class="menu-list-header">天作云SaaS</header> -->
        <el-scrollbar class="ask-scrollbar-wrapper">
        <!-- <section class="menu-list-wrapper"> -->
            <el-menu
                class="custom-el-menu"
                mode="vertical"
                :default-active="currentActive"
                :default-openeds="defaultOpeneds"
                :unique-opened="false"
                :collapse="isCollapse"
            >
                <side-bar
                    v-for="route in list"
                    :key="route._key"
                    :item="route"
                    :is-collapse="isCollapse"
                ></side-bar>
            </el-menu>
        <!-- </section> -->
        </el-scrollbar>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Inject } from "vue-property-decorator";
import SideBar from "./side-bar.vue";
import { State } from 'vuex-class';

@Component({
    name: "MenuList",
    components: {
        SideBar
    }
})
export default class MenuList extends Vue {
    @Prop({
        type: Boolean,
        default: false
    }) readonly isCollapse!: boolean;

    @State("dynamicRouterList") dynamicRouterList!: any[];
    @State("menuList") menuList!: any[];

    list: Array<any> = [];
    currentActive = "";

    get defaultOpeneds() {
        return this.list.map((item: any) => item._path);
    }

    created() {
        this.list = this.menuList.map((item: any) => {
            return {
                ...item,
                path: item.path || item._key,
                _path: item.path || item._key
            };
        });
    }

    @Watch("$route", { immediate: true })
    on$routeChange(to: any) {
        if (to.matched.length > 1) {
            const _matched = to.matched.slice(-to.matched.length + 1);
            this.currentActive = _matched[_matched.length - 1].path;
        }
    }

    @Inject() readonly mainLayout!: any;
    toggleNav() {
        this.mainLayout.toggleNav();
    }
}
</script>
